<template>
  <div>
    <h1>行程管理</h1>
    <!-- <el-button @click="queryCondition">试试看</el-button>
      <el-input v-model="datavehi.name" size="small" placeholder="查找" /> -->
    <el-table :data="currentPageData" style="width: 100%">
      <el-table-column  label="行程路线" prop="routePrice.route">
      </el-table-column>
      <el-table-column label="出发日期" prop="formattedDate"/>
      <el-table-column label="出发时间" prop="formattedDateTime"/>
      <el-table-column label="车牌号" prop="vehicleLicense" />
      <el-table-column label="司机" prop="name" />
      <el-table-column label="司机电话" prop="phone" />
      <el-table-column label="行程人数">
        <template #default="scope">
          <span class="flex-container">
            <div>{{ scope.row.numPassengers }}</div>
            /
            <div>{{ scope.row.maxSeatCapacity }}</div>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="行程状态" prop="status" />
      <el-table-column align="right">
        <template #header>
          <el-input  v-model="search"  placeholder="请输入司机名字" style="width: 230px;" />
        </template>
        <template #default="scope">
          <el-button size="small" type="primary" @click="TravelViewSon(scope.row)"
            >监控</el-button
          >
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="datatable.length"
    />
  </div>
</template>

<script  setup>
import router from "../router";
import request from "@/utils/request";
import axios from "axios";
import { ref, onMounted, computed } from "vue";
const datatable = ref([]);
const search = ref("");
const datatableRoute=ref([])
const datavehi=ref({
  name:""
})
const TravelViewSon = (row) => {
  router.push({ 
        path: "/TravelViewSon",
        query: { id: row.vehicleId ,route:row.routePrice.route,phone:row.phone}
      });
};

//钩子一进来就查询
onMounted(() => {
  request.get("/manager/queryByPage").then((result) => {
    if (result.success) {
      console.log(result.message);
      datatable.value = result.data; // 请求成功后，将result.data赋值给datatable
    }
  });
});
const currentPage = ref(1); // 当前页码
const pageSize = ref(6); // 每页的数据量

const currentPageData = computed(() => {
  // 计算当前页的数据
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.value.slice(start, end);
});

const handleSizeChange = (val) => {
  // 处理每页数据量改变的事件
  pageSize.value = val;
  currentPage.value = 1; // 每次改变每页数据量时，都将页码重置为1
};

const handleCurrentChange = (val) => {
  // 处理页码改变的事件
  currentPage.value = val;
};

// 添加一个计算属性来过滤数据
const filteredData = computed(() => {
  if (!search.value) {
    return datatable.value;
  }
  return datatable.value.filter((data) =>
    Object.values(data).some((value) =>
      String(value).toLowerCase().includes(search.value.toLowerCase())
    )
  );
});
</script>

<style scoped>
.homebox {
  width: 100%;
  height: 100vh;

  position: relative;
}
.head {
  height: 100px;
  background: #071f4d;
}
.headimg {
  width: 100%;
  height: 100%;
}
.mapp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100px;
}
.content {
  height: calc(100vh - 100px);
  display: flex;
}
.flex-container {
  display: flex;
  flex-direction: row;
}
</style>
